<template>
  <div class="search">
    <k-header headTitle="搜索" goBack="true" rightTitle="" @rightClick=""></k-header>
    <div :class="isIos?'archieve_wrapper_ios':'archieve_wrapper'">
      <input class="archieve_input _input" v-model="oName" placeholder="姓名查询">
      <div class="archieve_search" @click="oSearch">搜索</div>
      <img class="archieve_img" src="../../assets/img/reference/report-center-glass.png"/>
    </div>
  </div>
</template>

<script>
  import kHeader from '../common/head'
    export default {
        name: 'search',
        data () {
            return {
              oName:'',
              isIos:false
            }
        },
      created(){
        if (window.navigator.userAgent.indexOf('LBLSIOS') > -1){
          this.isIos = true
        }else {
          this.isIos = false
        }
      },
      components:{
        kHeader
      },
      methods:{
        oSearch(){
          this.$router.push({ name: '_search', params: { realName: this.oName }})
        }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .search{
    overflow: hidden;
  }
  .archieve_wrapper{
    margin-top: 45px;
    background: rgb(244,244,244);
    display: flex;
    width: 100%;
    height: 68px;
    box-sizing: border-box;
    padding: 13px 4%;
    position: relative;
  }
  .archieve_wrapper_ios{
    margin-top: 65px;
    background: rgb(244,244,244);
    display: flex;
    width: 100%;
    height: 68px;
    box-sizing: border-box;
    padding: 13px 4%;
    position: relative;
  }
  .archieve_input{
    flex: 1;
    margin: 0;
    background: #ffffff;
    outline: none;
    border: none;
    -web-kit-appearance:none;
    -moz-appearance: none;
    padding-left: 10% ;
  }
  .archieve_search{
    font-size: 1.4rem;
    flex: 0 0 10.8%;
    text-align: right;
    color: #FF790E;
    height: 42px;
    line-height: 42px;
  }
  .archieve_img{
    position: absolute;
    width: 4.3%;
    left: 6%;
    top: 39%;
  }
</style>
